<template>
    <div style="min-height:600px">
      <yd-cell-item arrow>
        <span slot="left">出行方式： </span>
        <yd-input disabled slot="right" hdLabel="出行方式" ref="travel_mode" v-model="travel_mode" placeholder="自由行" @click.native="show1 = true"></yd-input>
      </yd-cell-item>       
      <yd-cell-item>
        <span slot="left">投诉类别： </span>
        <yd-input disabled slot="right" hdLabel="投诉类别" ref="type" v-model="type" disabled ></yd-input>
      </yd-cell-item>      
      <yd-cell-item>
        <span slot="left">投诉对象： </span>
        <yd-input disabled slot="right" hdLabel="投诉对象" ref="source_name" v-model="source_name" disabled ></yd-input>
      </yd-cell-item>   
      <yd-cell-item>
          <span slot="left">姓名：</span>
          <yd-input slot="right" v-model="name" required :show-clear-icon="false" placeholder="请输入联系人姓名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
          <span slot="left">手机号：</span>
          <yd-input slot="right" v-model="phone" regex="mobile" placeholder="请输入联系人手机号码"></yd-input>
      </yd-cell-item>
      <yd-cell-group >
        <yd-cell-item>
            <yd-textarea slot="right" placeholder=" 投诉事由" maxlength="100" v-model="cause_complaint"></yd-textarea>
        </yd-cell-item>
      </yd-cell-group>
      
            <!-- 弹出框 -->
      <yd-popup v-model="show1" position="bottom" height="30%">
          <yd-cell-group title="请选择出行方式">
              <yd-cell-item type="radio">
                  <span slot="left">自由行</span>
                  <input slot="right" type="radio" value="自由行" v-model="travel_mode"/>
              </yd-cell-item>
              <yd-cell-item type="radio">
                  <span slot="left">跟团游</span>
                  <input slot="right" type="radio" value="跟团游" v-model="travel_mode"/>
              </yd-cell-item>
              <yd-cell-item type="radio">
                  <span slot="left">走亲访友</span>
                  <input slot="right" type="radio" value="走亲访友" v-model="travel_mode"/>
              </yd-cell-item>
              <yd-cell-item type="radio">
                  <span slot="left">出差</span>
                  <input slot="right" type="radio" value="出差" v-model="travel_mode"/>
              </yd-cell-item>
              <yd-cell-item type="radio">
                  <span slot="left">其他</span>
                  <input slot="right" type="radio" value="其他" v-model="travel_mode"/>
              </yd-cell-item>
              <yd-cell-item>
                  <span slot="left">选中的值：</span>
                  <span slot="right">{{travel_mode}}</span>
              </yd-cell-item>
          </yd-cell-group>
      </yd-popup>
      <!-- 上传图片 -->
      <div class="sctpwz">上传图片</div>
      <div class="imgandvideo">
      <div class="ivleft">
      <!-- <yd-lightbox v-if="uploadimglist.length>0">
        <div style="overflow-y: hidden;float:left;">
          <yd-lightbox-img class="pinglunimgdiv" v-for="(item, $index) in 4" :key="$index" :src="uploadimglist[0]">
          </yd-lightbox-img>
        </div>
      </yd-lightbox>
      <div class="pinglunimgdiv" @click="uploadimg">
        上传照片
      </div> -->
      <div class="hd-upload">
        <!-- 显示图片部分 -->
        <div class="hd-upload-card-img" v-for="(item, index) in imgArr" :key="index">
          <img :src="item">
          <div class="hd-upload-card-img-bash" @click="deleteImage(index)">
            <i class="yd-icon-home"></i>
          </div>
        </div>
        <!-- 自定义上传组件 -->
        <div class="hd-upload-card hd-upload-card-a">
          <i class="yd-icon-star" style="font-size: 0.6rem; color: rgb(255, 104, 93);"></i>
          <hd-upload @filesChange="imageChange"/>
        </div>
      </div>
      </div>
      <!-- <div class="ivright" v-if="imgArr.length==0">
      100字+3张图或20秒视频有机会赢<span style="color:#f1b8a5">100积分</span>
      </div> -->
      </div>
      <yd-button size="large" type="warning" bgcolor="#ff6634" color="#fff" style="height:40px;line-height:40px;margin-top:15px;float:left;" @click.native="clickf">提交投诉</yd-button>
    </div>
</template>
<script>
import {upLoadFileByBase64, dataURLtoBlob} from 'hdc/mixin'
export default {
  mixins: [
    upLoadFileByBase64,
    dataURLtoBlob
  ],
  name: 'addComplaint',
  data() {
    return {
      name: '',
      source_type: '',
      phone: '',
      cause_complaint: '',
      type: '',
      show1: false,
      travel_mode: '自由行',
      imguplist: [],
      imgArr: []
    }
  },
  mounted: function() {
    console.log(this.$route.query);
    console.log('!@$#!@#!@#');
    this.type = this.$route.query.type;
    if (this.type === 'J') {
      this.type = '景区'
    }
    if (this.type === 'L') {
      this.type = '线路'
    }
    if (this.type === 'A') {
      this.type = '游记'
    }
    if (this.type === 'T') {
      this.type = '租赁'
    }
    if (this.type === 'M') {
      this.type = '商户'
    }
    if (this.type === 'S') {
      this.type = '购物'
    }
    if (this.type === 'H') {
      this.type = '住宿'
    }
    this.source_name = this.$route.query.source_name;
    this.source_id = this.$route.query.source_id;
  },
  methods: {
    // 获取图片地址
    async getOssPath() {
      let gdetail = []
      // 如果使用循环,不能是用 foreach 解析
      for (let item of this.imgArr) {
        gdetail.push(await this.upLoadFileByBase64(item))
      }
      return gdetail
    },
    async clickf() {
      let imguplist = await this.getOssPath()
      if (imguplist && imguplist.length > 0) {
        imguplist = imguplist.join()
      } else {
        imguplist = ''
      }
      if (this.travel_mode === '自由行') {
        this.travel_mode = '0'
      }
      if (this.travel_mode === '跟团游') {
        this.travel_mode = '1'
      }
      if (this.travel_mode === '走亲访友') {
        this.travel_mode = '2'
      }
      if (this.travel_mode === '出差') {
        this.travel_mode = '3'
      }
      if (this.travel_mode === '其他') {
        this.travel_mode = '4'
      }
      this.hdAjax({
        url: this.API.createComplaint,
        method: 'post',
        data: {
          travel_mode: this.travel_mode,
          type: this.$route.query.type,
          source_id: this.$route.query.source_id,
          source_name: this.$route.query.source_name,
          name: this.name,
          phone: this.phone,
          cause_complaint: this.cause_complaint,
          image_complaint: imguplist
        },
        success: (resultData) => {
          console.log('====================================')
          console.log('发表成功')
          console.log('====================================')
          this.$dialog.alert({
            mes: '发表成功,请等待管理员审核!',
            callback: () => {
              this.$router.go(-1)
            }
          });
        }
      });
    },
         /**
     * 返回图片
     * @files 文件对象
     * @srcs 图片 src 数组
     */
    imageChange(files) {
      const reader = new FileReader();
      // 读取图片
      reader.onload = (e) => {
        let src = e.target.result;
        // 添加图片预览
        this.addImage(src)
      }
      reader.readAsDataURL(files[0]);
    },
    // 添加图片
    addImage(src) {
      // 赋值给 img 以 base64 形式显示
      this.imgArr.push(src)
    },
    // 删除图片
    deleteImage(index) {
      // 删除图片
      this.imgArr.splice(index, 1)
    }
  }
}
</script>

<style>
.sctpwz{
  float: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px #f0f0f0 solid;
  font-size: 15px;
  padding-left: 5px;
}
.imgandvideo{
  float: left;
  width: 100%;
  min-height: 130px;
}
.ivleft{
  float: left;
  padding: 5px 0px;
  width: 100%;
  height: auto;
}
</style>

<style lang="stylus" scoped>
.hd-upload
  display flex
  width 100%
  flex-flow wrap
.hd-upload-card
  position relative
  flex 0 0 32%
  box-sizing border-box
  border 1px dashed #c0ccda
  background-color #fbfdff
  border-radius 6px
  text-align center
  margin .05rem
.hd-upload-card-img
  position relative
  flex 0 0 32%
  margin .05rem
  height 2.4rem
  img
    height 100%
    width 100%
    border 1px solid #ebebeb
  &-bash
    position absolute
    bottom 0
    background-color rgba(88, 88, 88, 0.73)
    color #ffffff
    width 100%
    height .5rem
    text-align center
    font-size .4rem
.hd-upload-card-a
  line-height 2.2rem
.hd-img-auto
  width 100%
  height 100%
</style>